<template>
	<div class="app-container">
		<div class="date">
			<!-- 今日昨日 -->
			<el-radio-group v-model="radio1" @change="handleRadioChange">
				<el-radio-button label="今日" @click="today()"></el-radio-button>
				<el-radio-button label="昨日" @click="Yesterday()"></el-radio-button>
			</el-radio-group>

			<!-- 自定义日期 -->
			<span class="riqi">自定义 :</span>
			<el-date-picker v-model="selectedDate" :picker-options="pickerOptions" @change="onDateChange" type="date"
				placeholder="选择日期">
			</el-date-picker>

			<!-- 根据月份查看 -->
			<div class="mouth">
				<span class="yuefen">按照月份 :</span>
				<el-select v-model="selectedOption" placeholder="请选择月份" @change="handleChange">
					<el-option v-for="option in options" :key="option.value" :label="option.label"
						:value="option.value">
					</el-option>
				</el-select>

			</div>


			<!-- 根据年查 -->
			<div class="year">
				<span class="yuefen">按照年份 :</span>
				<el-select v-model="selectedYear" placeholder="请选择年份" style="width: 200px;" @change="ChangeYear">
					<el-option v-for="year in years" :key="year" :label="year" :value="year">
					</el-option>
				</el-select>

			</div>

		</div>


		<div v-if="radio1 === '今日'">
			<div class="takein">
				<div class="take">
					总收入钱
					<span class="number">¥{{" "+Takein}}</span>
				</div>
				<div class="take2">
					总订单量
					<span class="number">{{OrderCount+" "}}单</span>
				</div>
			</div>

			<div class="picture">
				<ECharts :options="chart" />
				<ECharts :options="chartOptions" />
			</div>
		</div>
		<div v-else-if="radio1 === '昨日'">
			<div class="takein">
				<div class="take">
					总收入钱
					<span class="number">¥{{" "+Takein}}</span>
				</div>
				<div class="take2">
					总订单量
					<span class="number">{{OrderCount+" "}}单</span>
				</div>
			</div>

			<div class="picture">
				<ECharts :options="chart" id="incomeChart" />
				<ECharts :options="chartOptions" />
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import ECharts from '@/components/ECharts.vue';
	import {
		getCensus,
		getTypeCensus,
		getMonth,
		getMonthCensus,
		getYear,
		getYearCensus
	} from "@/api/business/census";

	export default {
		name: "Census",
		components: {
			ECharts
		},
		data() {
			return {
				selectedYear: null,
				// 生成从当前年份往前推 20 年的年份数组
				years: Array.from({
					length: 20
				}, (_, i) => (new Date()).getFullYear() - i),
				selectedOption: null,
				options: [{
						value: '01',
						label: '一月'
					},
					{
						value: '02',
						label: '二月'
					},
					{
						value: '03',
						label: '三月'
					}, {
						value: '04',
						label: '四月'
					},
					{
						value: '05',
						label: '五月'
					},
					{
						value: '06',
						label: '六月'
					}, {
						value: '07',
						label: '七月'
					},
					{
						value: '08',
						label: '八月'
					},
					{
						value: '09',
						label: '九月'
					}, {
						value: '10',
						label: '十月'
					},
					{
						value: '11',
						label: '十一月'
					},
					{
						value: '12',
						label: '十二月'
					}
				],
				pickerOptions: {
					disabledDate(time) {
						// 禁止选择今天之后的日期
						return time > Date.now();
					}
				},
				selectedDate: '', // 初始为空字符串
				CurrentDate: "2024-09-10",
				MerchantId: '1',
				OrderCount: "0",
				Takein: 0,
				radio1: '今日',
				chart: {
					title: {
						text: '收入分布'
					},
					tooltip: {},

					series: [{
						name: '访问来源',
						type: 'pie', // 设置图表类型为饼图
						radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
						data: [ // 数据数组，name 为数据项名称，value 为数据项值
							{
								value: 150,
								name: '洗车'
							},
							{
								value: 274,
								name: '保养'
							}
						]
					}]
				},
				chartOptions: {
					title: {
						text: '订单分布'
					},
					tooltip: {},
					xAxis: {
						type: 'category',
						data: ["保养", "洗车"]
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						type: 'bar',
						data: [12, 24],
						itemStyle: {
							borderWidth: '10px'
						},
						barWidth: '20%'
					}]
				}

			};
		},
		watch: {

		},
		mounted() {
			this.today();
		},
		methods: {
			ChangeYear(value) {
				this.selectedOption=null
				this.selectedDate=null
				getYear(this.MerchantId, `${value}`).then(response => {
					// 检查 OrderCount 是否为 null 或 undefined
					if (response.orderCount === null || response.orderCount === undefined) {
						this.OrderCount = "0";
					} else {
						this.OrderCount = response.orderCount.toString(); // 确保转换为字符串
					}

					// 检查 Takein 是否为 null 或 undefined
					if (response.takein === null || response.takein === undefined) {
						this.Takein = "0";
					} else {
						this.Takein = response.takein.toString(); // 确保转换为字符串
					}
				}).catch(error => {
					console.error("获取年份数据失败:", error);
				});
				getYearCensus(this.MerchantId, `${value}`).then(res => {
					console.log(res)
					this.updateChartOptions(res);
					this.updateChart(res);
				});

			},
			handleChange(value) {
				this.selectedDate=null
				this.selectedYear = null
				this.selectedOption = `${value}`
				getMonth(this.MerchantId, this.selectedOption).then(response => {
					console.log(response);
					console.log(response.orderCount);
					// 检查 OrderCount 是否为 null 或 undefined
					if (response.orderCount === null || response.orderCount === undefined) {
						this.OrderCount = "0";
					} else {
						this.OrderCount = response.orderCount.toString(); // 确保转换为字符串
					}

					// 检查 Takein 是否为 null 或 undefined
					if (response.takein === null || response.takein === undefined) {
						this.Takein = "0";
					} else {
						this.Takein = response.takein.toString(); // 确保转换为字符串
					}
				}).catch(error => {
					console.error("获取月份数据失败:", error);
				});
				getMonthCensus(this.MerchantId, `${value}`).then(res => {
					console.log(res)
					this.updateChartOptions(res);
					this.updateChart(res);
				});
			},
			onDateChange(date) {
				// 当日期改变时，更新格式化的日期
				if (date instanceof Date) {
					this.CurrentDate = this.formatDate(date);
					getCensus(this.MerchantId, this.CurrentDate).then(response => {
						console.log(response)
						this.MerchantId = response.merchantId
						this.OrderCount = response.orderCount
						this.Takein = response.takein
					});
					getTypeCensus(this.MerchantId, this.CurrentDate).then(res => {
						console.log(res)
						this.updateChart(res);
						this.updateChartOptions(res);
					});
				} else {
					this.today();

				}
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的，所以需要加 1
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			handleRadioChange(value) {
				if (value === '今日') {
					this.today();
				} else if (value === '昨日') {
					this.Yesterday();
				}
			},
			today() {
				this.selectedOption=null
				this.selectedYear = null
				this.selectedDate=null
				const now = new Date();
				const year = now.getFullYear();
				const month = ('0' + (now.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，并格式化为两位数
				const day = ('0' + now.getDate()).slice(-2); // 格式化天为两位数
				this.CurrentDate = `${year}-${month}-${day}`;
				getCensus(this.MerchantId, this.CurrentDate).then(response => {
					console.log(response)
					this.MerchantId = response.merchantId
					this.OrderCount = response.orderCount
					this.Takein = response.takein
				});
				getTypeCensus(this.MerchantId, this.CurrentDate).then(res => {
					console.log(res)
					this.updateChartOptions(res);
					this.updateChart(res);
				});
			},
			Yesterday() {
				this.selectedOption=null
				this.selectedYear = null
				this.selectedDate=null
				const now = new Date();
				const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 减去一天
				const year = yesterday.getFullYear();
				const month = ('0' + (yesterday.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，并格式化为两位数
				const day = ('0' + yesterday.getDate()).slice(-2); // 格式化天为两位数
				this.CurrentDate = `${year}-${month}-${day}`;
				getCensus(this.MerchantId, this.CurrentDate).then(response => {
					console.log(response)
					this.MerchantId = response.merchantId
					this.OrderCount = response.orderCount
					this.Takein = response.takein
				});
				getTypeCensus(this.MerchantId, this.CurrentDate).then(res => {
					console.log(res)
					this.updateChart(res);
					this.updateChartOptions(res);
				});
			},
			updateChartOptions(response) {
				const xAxisData = response.map(item => item.service);
				const seriesData = response.map(item => item.count);

				this.chartOptions.xAxis.data = xAxisData;
				this.chartOptions.series[0].data = seriesData;
				// // 更新图表
				// this.orderChart.setOption(this.chartOptions);
			},
			updateChart(res) {
				const name = res.map(item => item.name);
				const value = res.map(item => parseFloat(item.value));
				const pieChartData = res.map(item => ({
					name: item.service,
					value: parseFloat(item.value) // 将字符串转换为数字
				}));
				this.chart.series[0].data = pieChartData;
			}

		}
	};
</script>
<style scoped>
	.date {
		height: 50px;
		width: 100%;

	}

	.takein {
		font-size: 18px;
		font-weight: 700;
		height: 100px;
		width: 100%;
		display: flex;
		margin-bottom: 60px;
		color: #464646;
	}

	.takein>div {

		padding-left: 7px;
		width: 600px;
		line-height: 100px;
	}

	.picture {
		display: flex;
	}

	.number {
		padding-left: 20px;
	}

	.take>span {

		color: #1D6FFF;
	}

	.take2>span {
		color: #54BCBD;
	}

	.riqi {
		padding-left: 20px;
		font-weight: 400;
		padding-right: 10px;
		font-size: 14px;
		color: #606266;
	}

	.el-date-editor.el-input {
		width: 200px;
		/* 设置输入框的宽度 */
	}

	.el-select {
		width: 200px;
	}

	.selected-option {
		margin-top: 10px;
		color: blue;
		background-color: lightyellow;
		padding: 5px;
	}

	.mouth {
		display: inline-block;
	}

	.yuefen {
		padding-left: 20px;
		font-weight: 400;
		padding-right: 10px;
		font-size: 14px;
		color: #606266;
	}

	.year {
		display: inline-block;
	}
</style>
<style scoped>

</style>